@import "animate.min.css";
body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
a{
    text-decoration :none;
    color:black;
}
#bgimage {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    z-index: -1;
  }
#main{
    width:100%;
    height:500%;
    z-index: 0;
}
#p1{
    position:absolute;
    width:100%;
    height:100%;
    z-index: 1;
}
#p2{
    position:absolute;
    width:100%;
    height:100%;
    top: 100%;
    background-color: white;
    z-index: 1;
}
#p3{
    /*加了一个图片窗口，*/
    position:absolute;
    top: 11.11%;
    width:100%;
    height:88.9%;
    z-index: 2;
}
#p4{
    position:absolute;
    width:100%;
    height:100%;
    top: 533.3%;
    background-color: rgb(185, 171, 171);
    z-index: 1;
}
#p5{
    position:absolute;
    width:100%;
    height:80%;
    top: 633.33%;
    background-color: rgb(185, 171, 171);
    z-index: 1;
}
#guide{
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width:100%;
    height:6.5%;
    background-color: #DBD7D688;
    
}
#logo {
    position:absolute;
    width: 3.3%;
    height: 100%;
    left: 2%;
    background:url(../images/logo.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius: 50%;
    cursor:pointer;
}
#name{
    position:absolute;
    width: 9%;
    height: 100%;
    left: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150%;
    cursor:pointer;
    font-family: Microsoft YaHei; 
}
.g1_5{
    position:absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    font-size: 100%;
    font-family:Microsoft YaHei; 
}
.g1_5:hover {
    background: rgba(0, 0, 0, 0.5);
}
#g0{
    width: 5%;
    right: 29%;
}
#g1{
    width: 5%;
    right: 24%;
}
#g2{
    width: 5%;
    right: 19%;
}
#g3{
    width: 5%;
    right: 14%;
}
#g4{
    width: 5%;
    right: 9%;
}
#g5{
    width: 7%;
    right: 2%;
    color: black;
}
#p1main{
    position: absolute;
    width: 40%; 
    height: 60%;
    left: 50%;
    top: 50%;
    margin-left: -20%;
    margin-top: -15%;
    text-align: center;
}
#p1main > h1{
    font-family:  KaiTi ; 
    font-size: 320%;
}
#p1main > p{
    font-family:Verdana; 
    font-size: 150%;
}
#p1btn{
    position: absolute;
    top :68%;
    width: 100%; 
    height: 33%;
    z-index: 2;
    text-align:center;
    font-family: Microsoft YaHei; 
}
#p1btn > button {
    width:20%;
    height: 25%;
    position: absolute;
    left: 37.5%;
    bottom: 40%;
    text-align: center;
    border-style :none; 
    cursor:pointer;
    background: rgba(89, 143, 252, 0.8);
    font-family: Microsoft YaHei; 
    color: white;
    font-size: 100%; 
    border-radius:5px;
    background-size: cover;
}
#p1btn > button:hover {
    background: rgb(72, 145, 255);
}
/*page 2*/
#p2about{
    position: absolute;
    top :0;
    width: 100%; 
    height: 20%;
    text-align: center;
    background-color: white;
}
#p2about > h1{
    font-family:  Microsoft YaHei;
    font-size: 320%;
}
#p2about > div{
    position: absolute;
    bottom: 12%;
    left: 45%;
    width: 10%; 
    height: 10%;
    text-align: center;
    background-color: skyblue;
    border-radius: 2px;
}
#p2image{
    position: absolute;
    top :20%;
    right: 55%;
    width: 35%; 
    height: 78%;
    background-color:rgba(0, 255, 255, 0.473);
    background:url(../images/p2image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    backface-visibility: hidden;
}
#p2center{
    position: absolute;
    top :20%;
    left: 49%;
    width: 2%; 
    height: 78%;
    border-radius: 10px;
    background-color:rgba(0, 255, 255, 0.473);
    background:url(../images/p2center.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    backface-visibility: hidden;
}
#p2introduce {
    position: absolute;
    top :25%;
    right: 15%;
    width: 30%; 
    height: 70%;
    border:1px solid #96c2f1;
    background-color:#074e94;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    font-family: Microsoft YaHei; 
    box-shadow: 10px 10px 5px #888888;
}
#p2_intro_h2{
    position: absolute;
    top :0%;
    width: 100%;
    height: 15%;
    vertical-align:middle;
    text-align: center;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    background-color:cyk(70,60,70);
}
#p2_intro_h2 h2{
    color: whitesmoke;
    font-size: 170%;
}
#p2_intro_p{
    position: absolute;
    top: 15%;
    width: 100%;
    height:85%;
    font-size: 120%;
    background-color: whitesmoke;
}
/*page 3*/
#p3_imgwindow{
    position:absolute;
    top: 200%;
    width:100%;
    height:333.33%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    background-color: #074e94;
    z-index: 1;
}
#p3window{
    position:absolute;
    top: 0%;
    width:100%;
    height:11.11%;
    background-color: rgba(128, 128, 128, 0.5);
}
#p3win_left{
    position: absolute;
    top: 15%;
    left: 10%;
    width: 30%;
    height:75%;
    border-radius: 10px;
    border:1px solid rgba(55, 100, 224, 0.5)
}
#p3win_left:hover{
    background-color: rgba(21, 87, 219, 0.1);
    cursor:pointer;
}
#p3win_left:hover+#p3win_center #p3win_center_intro_cat{
    top:0;
}
#p3win_center{
    position: absolute;
    top: 0.1%;
    left: 40.1%;
    right: 40.25%;
    height:99.8%;
    overflow: hidden;
    border-radius: 10px;
    background-color: #ffffff00;
}
#p3win_center_intro_cat{
    position: absolute;
    top: -100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: 1s;
    border:1px solid #96c2f1;
    background-color: rgba(134, 199, 230, 0.5);
}
#p3win_center_intro_cat div{
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
}
#p3win_center_intro_cat div h2{
    text-align: center;
}
#p3win_center_intro_man{
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    transition: 1s;
    border-radius: 10px;
    border:1px solid #96c2f1;
    background-color: rgba(135, 207, 235, 0.5);
}
#p3win_center_intro_man div{
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
}
#p3win_center_intro_man div h2{
    text-align: center;
}
#p3win_right{
    position: absolute;
    top: 15%;
    right: 10%;
    width: 30%;
    height:75%;
    border-radius: 10px;
    border:1px solid rgba(55, 100, 224, 0.5)
}
#p3win_right:hover{
    background-color: rgba(21, 87, 219, 0.1);
    cursor:pointer;
}
.p3win_head{
    
    position: absolute;
    left: 0%;
    width:42%;
    height:100%;
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius: 50%;
}
#p3win_head_left{
    background:url(../images/p3_lea_cat.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius: 50%;
}
#p3win_head_right{
    background:url(../images/man.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius: 50%;
}
.p3win_name{
    position: absolute;
    right: 0%;
    width: 67%;
    height:100%;
    vertical-align:middle;
    text-align: center;
    font-family: Microsoft YaHei;
    font-size: 120%;
}
.p3win_name h2{
    color: #6195FF;
}
#p3_leader{
    position: absolute;
    top: 0%;
    width: 100%;
    height:33.33%;
    background-color: aliceblue;
}
#p3_leader_h2{
    position: absolute;
    top: 0%;
    width: 100%;
    height:16%;
    text-align: center;
    font-size: 170%;
}
#p3_leader_h2 div{
    position: absolute;
    bottom: 0%;
    left: 47.5%;
    width: 5%; 
    height: 10%;
    text-align: center;
    background-color: skyblue;
    border-radius: 2px;
}
.p3_lea{
    position: absolute;
    top: 25%;
    width: 25%;
    height: 60%;
    border:1px solid #3c81d1;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 10px;
    overflow: hidden;
    cursor:pointer;
}
.p3_lea_mask{
    position: absolute;
    top: -100%;
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 10px;
    opacity: 0;
    transition: 1s;
    z-index: 3;
}
.p3_lea_mask div{
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%;
    height: 70%;
    font-family:Microsoft YaHei;  
    color: whitesmoke;
}
.p3_lea_mask div h2{
    text-align: center;
}
 #p3_lea_1:hover .p3_lea_mask{
    opacity: 0.8;
    top: 0%;
}
#p3_lea_2:hover .p3_lea_mask{
    opacity: 0.8;
    top: 0%;
}
#p3_lea_3:hover .p3_lea_mask{
    opacity: 0.8;
    top: 0%;
}
#p3_lea_1{
    left: 9%;
}
#p3_lea_2{
    left: 37.5%;
    top: 21%;
    box-shadow:none;
}
#p3_lea_3{
    right: 9%;
}
.p3_lea_pic{
    position: absolute;
    top: 5%;
    left: 20%;
    width: 60%;
    height: 60%;
    background-color: #6195FF;
    border-radius: 5px;
    overflow: hidden;
}
#p3_lea_pic1{
    background:url(../images/lea_left.jpg);
    background-size:100% 100%;
}
#p3_lea_pic2{
    background:url(../images/cat2.jpg);
    background-size:100% 100%;
}
#p3_lea_pic3{
    background:url(../images/lea_right.jpg);
    background-size:100% 100%;
}
.p3_lea_intro{
    position: absolute;
    top: 80%;
    width: 100%;
    height: 20%;
    color: #6195FF;
    text-align: center;
    font-family: Microsoft YaHei; 
    font-size: 200%;
}
.p3_lea_intro span{
    position: absolute;
    left: 0%;
    width: 100%;
    bottom: 10%;
    color: black;
    font-size: 55%;
}
#span_p3_lea_cen{
    left: 36%;
}
#p3_member{
    position: absolute;
    top: 33.33%;
    width: 100%;
    height:66.67%;
    background-color: rgb(154, 208, 255);
}
#p3_member_title{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 90%;
    height:6%;
    border-bottom-left-radius:30px;
    line-height: 100%;
    text-align: left;
    font-size: 150%;
    background-color:rgb(231, 230, 230);
    font-family:  Microsoft YaHei; 
}
#p3_member_depart{
    position: absolute;
    top: 8%;
    left: 10%;
    width: 90%;
    height:92%;
    border-top-left-radius: 20px;
    background-color: rgb(154, 208, 255);
}
#p3_member_left{
    position: absolute;
    top: 5%;
    left: 5%;
    width: 40%;
    height:90%;
}
#p3_member_center{
    position: absolute;
    top: 5%;
    left: 49.75%;
    width:0.5%;
    height:90%;
    border-radius: 3px;
    background-color: #888888;
}
#p3_member_right{
    position: absolute;
    top: 5%;
    right: 5%;
    width: 40%;
    height:90%;
}
.p3_member_img{
    position: absolute;
    right: 5%;
    width: 70%;
    height:20%;
    border:medium double skyblue;
    background-color: #32acc2;
}
#p3_member_depart_1_img{
    top: 4%;
    background:url(../images/cat_office.jpeg);
    background-size:100% 100%;
}
#p3_member_depart_2_img{
    top: 28%;
    background:url(../images/cat_man.jpg);
    background-size:100% 100%;
}
#p3_member_depart_3_img{
    top: 52%;
    background:url(../images/cat_meng.jpg);
    background-size:100% 100%;
}
#p3_member_depart_4_img{
    top: 76%;
    background:url(../images/blackcat.jpg);
    background-size:100% 100%;
}
.p3_member_point{
    position: absolute;
    right: -50%;
    width: 200%;
    height:1%;
    border-radius: 50%;
    background-color: #dfdb13;
}
#p3_member_depart_1_point{
    top: 7%;
}
#p3_member_depart_2_point{
    top: 31%;
}
#p3_member_depart_3_point{
    top: 55%;
}
#p3_member_depart_4_point{
    top: 79%;
}
.p3_member_intro{
    position: absolute;
    left: 5%;
    width:70%;
    height:20%;
    border-top-left-radius: 25px;
    box-shadow: 5px 5px 10px #888888;
    background-color:rgb(21, 60, 97);
    overflow: hidden;
}
#p3_member_depart_1_intro{
    top: 5%;
}
#p3_member_depart_2_intro{
    top: 29%;
}
#p3_member_depart_3_intro{
    top: 53%;
}
#p3_member_depart_4_intro{
    top: 78%;
}
.p3_member_intro_h2{
    position: absolute;
    top: 20%;
    left: 0%;
    width:25%;
    height:80%;
    text-align: center;
    font-size: 200%;
    color: #a6bdd4;
    font-family:   Microsoft YaHei; 
    background-color:rgb(21, 60, 97);
}
.p3_member_intro_p{
    position: absolute;
    top: 16%;
    right: 0%;
    width:75%;
    height:84%;
    font-family:  Microsoft YaHei; ;
    color: whitesmoke;
}
#p4_header{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 90%;
    height:12%;
    border-bottom-left-radius:30px;
    text-align: left;
    font-size: 120%;
    line-height: 100%;
    background-color:rgb(231, 230, 230);
    font-family:  Microsoft YaHei; 
}
#p4_news{
    position: absolute;
    top: 14%;
    left:10%;
    width: 100%;
    height:86%;
}
#p4_news_header{
    position: absolute;
    top: 0%;
    left:15%;
    width: 45%;
    height:12%;
    font-size: 150%;
    text-align: left;
}
#p4_img_box{
    position: absolute;
    top: 20%;
    left:0%;
    width: 40%;
    height:65%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #438174;
}
.p4_news_img{
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height:100%;
}
#P4_news_img1{
    background:url(../images/p4_news_img1.jpg);
    background-size:100% 100%;
}
#p4_news_intro{
    position: absolute;
    top: 24%;
    left:45%;
    width: 20%;
    height:55%;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #15886f;
}
#p4_news_intro h2{
    text-align: center;
    font-size: 200%;
}
#p4_news_intro p{
    font-size: 120%;
}
#p4_news_more{
    position: absolute;
    right: 35%;
    top: 80%;
    width: 10%;
    height:3%;
    text-align: right;
    cursor:pointer;
}
#title{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 90%;
    height:12%;
    border-bottom-left-radius:30px;
    line-height: 100%;
    text-align: left;
    font-size: 120%;
    background-color:rgb(231, 230, 230);
    font-family:  Microsoft YaHei; 
}
#connect{
    position: absolute;
    left: 10%;
    top: 0%;
    width: 90%;
    height:80%;
}
#tel{
    position: absolute;
    left: 5%;
    top: 25%;
    width: 22%;
    height:75%;
    text-align: center;
}
#e_mail{
    position: absolute;
    left: 27%;
    top: 25%;
    width: 22%;
    height:75%;
    text-align: center;
}

#adress{
    position: absolute;
    left: 49%;
    top: 25%;
    width: 22%;
    height:75%;
    text-align: center;
}
.connect_img{
    position: absolute;
    left: 37%;
    top: 15%;
    width: 109px;
    height: 109px;
    border-radius: 50%;
    background-size:100% 100%;
}
.detil{
    position: absolute;
    left: 12.5%;
    bottom: 20%;
    width: 80%;
    height: 30%;
    text-align: center;
}
.detil h2{
    font-size: 200%;
}
.detil p{
    font-size: 150%;
}
#connect_img_email{
    background:url(../images/email.jpg);
}
#connect_img_tel{
    background:url(../images/tel.jpg);
}
#connect_img_adress{
    position: absolute;
    background:url(../images/adress.jpg);
}

#wxbcll{
    position: absolute;
    left: 80%;
    top: 25%;
    width: 3%;
    height:90%;
}
#link{
    position: absolute;
    top: 40%;
    width: 100%;
    height:50%;
    text-align: center;
    font-size: 150%;
}
#qq{
    position: absolute;
    top: 3%;
    width: 100%;
    height:9%;
    border-radius: 50%;
    background:url(../images/qq.jpg);
    background-size:100% 100%;
    cursor: pointer;
}
#wechat{
    position: absolute;
    top: 23%;
    width: 100%;
    height:9%;
    border-radius: 50%;
    background:url(../images/wechat.jpg);
    background-size:100% 100%;
    cursor: pointer;
}
#foot{
    position: absolute;
    top: 713.33%;
    left: 0;
    width: 100%;
    height: 5%;
    background-color: grey;
    color: white;
    text-align: center;
    font-size: 150%;
    font-family: 'Montserrat', sans-serif; 
}